<template>
	<view class="card-container">
		<view class="card-top">
			<u-text text="充值"align="right" @click="toCardAdd"></u-text>
			<u-text :text="this.user.consumeBalance" align="center"></u-text>
		</view>
		<view class="card-list">
			<!-- **************** -->
			<view class="list-item" v-for="(item,index) in cardList" :key="index" @click="toDetail(item.orderNumber)">
				<view class="item-left">
					<view class="left-top">
						<view class="left-top-left">
							时间：{{item.orderTime}}
						</view>
						<view class="left-top-right">
							支付方式：{{item.rechargeMode}}
						</view>
					</view>
					<view class="left-bottom">
						订单号：{{item.orderNumber}}
					</view>
				</view>
				<view class="item-right">
					{{item.rechargeAmount}}
				</view>
			</view>
			
			<!-- **************** -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardList:{},
				user:{}
			};
		},
		
		onLoad() {
			this.getUserInfo()
			this.getCardList()
		},
		methods:{
			toDetail(orderNumber){
				uni.navigateTo({
					url:'/pages/card/cardDetail?orderNumber='+orderNumber
				})
			},
			toCardAdd(){
				uni.navigateTo({
					url:'/pages/card/cardAdd'
				})
			},
			getCardList() {
				this.$request({
					url:'/prod-api/system/rechargeTable/list',
					method: 'GET',
					data:{}
				}).then(res=>{
					if (res.statusCode == 200) {
									if (res.data.code == 200) {
										this.cardList = res.data.rows
											// uni.$u.toast(res.data.msg)
					
									} else if (res.data.code == 500) {
										uni.$u.toast(res.data.msg)
									} else {
										uni.$u.toast('系统服务异常，请联系管理员！')
									}
								} else {
									uni.$u.toast('系统服务异常，请联系管理员！')
								}
				}).catch(err=>{
					console.log('errors:', errors);
								uni.$u.toast('服务器错误，请联系管理员！')
				})
			// 	uni.request({
			// 		url: 'https://www.gzzyue.com/prod-api/system/rechargeTable/list', //获取个人信息。
			// 		method: 'GET',
			// 		header: {
			// 			'Authorization': uni.getStorageSync("token") //自定义请求头信息
			// 		},
			// 		success: (res) => {
			// 			console.log('res:', res);
			// 			if (res.statusCode == 200) {
			// 				if (res.data.code == 200) {
			// 					this.cardList = res.data.rows
			// 						// uni.$u.toast(res.data.msg)
			
			// 				} else if (res.data.code == 500) {
			// 					uni.$u.toast(res.data.msg)
			// 				} else {
			// 					uni.$u.toast('系统服务异常，请联系管理员！')
			// 				}
			// 			} else {
			// 				uni.$u.toast('系统服务异常，请联系管理员！')
			// 			}
			// 		},
			// 		fail: (errors) => {
			// 			console.log('errors:', errors);
			// 			uni.$u.toast('服务器错误，请联系管理员！')
			// 		},
			// 	});
			
			},
			// *******************
			getUserInfo() {
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/getInfo', //获取个人信息。
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								this.user = res.data.user
									// uni.$u.toast(res.data.msg)
			
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			
			}
			// *******************
		}
	}
</script>

<style lang="scss" scoped>
.card-container{
	.card-top{
		margin: 5px;
		padding: 15px;
		border: 1px solid lightblue;
		border-radius: 5px;
	}
	.card-list{
		margin: 5px;
		padding: 15px;
		border: 1px solid lightblue;
		border-radius: 5px;
		.list-item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 1px solid #000;
			.item-left{
				.left-top{
					display: flex;
					flex-direction: row;
				}
			}
			.item-right{
				
			}
		}
	}
}
</style>
